<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大麦网-购物车</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/shopping.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- <link rel="stylesheet" href="../css/ui-base.css"> -->

    <!-- JS -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
    <!-- <script src="../js/shopping.js"></script> -->
    <style>
        .tips {
            width: 1180px;
            margin: 0 auto;
            position: absolute;
            left: 400px;
            top: 80px;
        }

        .tips a {
            font-size: 14px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="centre">

            <div class="logo">
                <img src="../images/logo.png" alt="">
            </div>
            <div class="tips">
                <a href="./reg.html">请登录</a>
                <a href="./login.html">免费注册</a>
            </div>
            <div class="search-header">
                <img class="i-search" src="//img.alicdn.com/tfs/TB1qv3jxGmWBuNjy1XaXXXCbXXa-34-36.png" alt="搜索">
                <input class="input-search" placeholder="搜索明星、演出、体育赛事" data-spm="dsearchbtn">
                <div class="btn-search" data-spm="dsearchbtn2">搜索</div>

            </div>
        </div>

    </div>

    <!-- 购物车列表 -->
    <div class="cart centre">
        <div class="catbox">
            <table id="cartTable">
                <thead>
                    <tr>
                        <th><label>
                                <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                        <th>商品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td class="checkbox"><input class="check-one check" type="checkbox" checked="true" /></td>
                        <td class="goods"><img src="../images/张杰.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                        <td class="price">5999.88</td>
                        <td class="count"><span class="reduce">-</span>
                            <input class="count-input" type="text" value="1" />
                            <span class="add">+</span>
                        </td>
                        <td class="subtotal">5999.88</td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr> -->

                </tbody>
            </table>
            <div class="foot" id="foot">

                <a class="fl" id="deleteAll" href="javascript:;">删除选中的商品</a>

                <a class="fl" id="clearAll" href="javascript:;">清理购物车</a>
                <div class="fr closing">结 算</div>
                <input type="hidden" id="cartTotalPrice" />
                <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
                <div class="fr selected" id="selected">
                    已选商品
                    <span id="selectedTotal">
                        0</span>
                    件
                    <span class="arrow up">
                        ︽</span>
                    <span class="arrow down">
                        ︾</span>
                </div>
                <!-- <div class="selected-view">
                    <div id="selectedViewList" class="clearfix">
                        <div><img src="../images/1.jpg"><span>取消选择</span></div>
                    </div>
                    <span class="arrow">◆<span>◆</span></span>
                </div> -->
            </div>
        </div>
    </div>


    <!-- 底部 -->
    <div class="footer">
        <div class="centre">
            <ul class="footer__links">
                <li class="footer__links__list">帮助中心
                </li>
                <li class="footer__links__grep">|</li>

                <li class="footer__links__list">
                    公司介绍</li>
                <li class="footer__links__grep">|</li>

                <li class="footer__links__list">品牌识别</a></li>
                <li class="footer__links__grep">|</li>

                <li class="footer__links__list">公司大事记</a></li>
                <li class="footer__links__grep">|</li>

                <li class="footer__links__list">协议及隐私权政策</a></li>
                <li class="footer__links__grep">|</li>

                <li class="footer__links__list">廉正举报</a></li>
                <li class="footer__links__grep">|</li>

                <li class="footer__links__list">联系合作</a></li>
                <li class="footer__links__grep">|</li>

                <li class="footer__links__list">招聘信息</a></li>
                <li class="footer__links__grep">|</li>

                <li class="footer__links__list">防骗秘籍</a></li>


            </ul>
            <div class="footer-ft">
                <div class="footer__ft_fl">
                    <div class="footer__ft__logo">
                        <img src="../images/logo.png">
                    </div>
                    <div class="footer__ft__code__box">
                        <img class="footer__ft__code" src="../images/二维码.jpg">
                        <span>APP下载</span>
                    </div>
                </div>
                <div class="footer__ft_fr">
                    <div class="footer__fr__contact">
                        在线客服
                    </div>
                    <div class="ul-wrap">
                        <ul class="footer__ft__words">
                            <li class="footer__ft__certificate">京ICP证031057号</li>
                            <li class="footer__ft__grep">|</li>
                            <li class="footer__ft__certificate">京ICP备11043884号</li>
                            <li class="footer__ft__grep">|</li>
                            <li class="footer__ft__certificate">京公网安备11010502037341号
                            </li>
                            <li class="footer__ft__grep">|</li>
                            <li class="footer__ft__certificate">广播电视节目制作经营许可证(京)字第02253号</li>
                        </ul>

                        <ul class="footer__ft__words">
                            <li class="footer__ft__certificate">网络文化经营许可证 京网文[2019]4082-420号</li>
                            <li class="footer__ft__grep">|</li>
                            <li class="footer__ft__certificate">营业性演出许可证京市演587号</li>
                        </ul>
                        <ul class="footer__ft__words">
                            <li class="footer__ft__certificate">北京大麦文化传媒发展有限公司 版权所有</li>
                            <li class="footer__ft__certificate">大麦网</li>
                            <li>Copyright 2003-2020 All Rights Reserved</li>
                        </ul>
                        <ul class="footer__ft__words">
                            <li>举报投诉：damai_tousu@member.alibaba.com 浙江省杭州市余杭区文一西路969号</li>
                        </ul>
                        <ul class="footer__ft__words">
                            <li>违法不良信息举报电话：020-62108294</li>
                        </ul>
                    </div>

                    <div class="footer__ft__img">
                        <img class="footer__ft__img2" src="../images/电子执照.png">
                        <img src="../images/PCI.png" class="footer__ft__img3">
                        <img class="footer__ft__img4" src="../images/诚信网站.png">
                    </div>
                </div>

            </div>

        </div>



    </div>
    <div class="side">
        <div class="item">
            <div class="icon damai">

            </div>
            <p>app下载</p>
            <div class="qrcode"></div>
        </div>
        <div class="GoTop">
            <div class="icon gotop"></div>
            <p>回到顶部</p>
        </div>
    </div>
    <script src="../js/backTop.js"></script>
</body>


<!-- js -->

<script>

    //  判读登录
    var tips = document.getElementsByClassName("tips")[0];
    var user = getCookie("lgc");
    // list.html => detail.html => login. 
    // 页面加载时  有用户名就表示用户身份  没有=>去登录
    if (user) {
        tips.innerHTML = `欢迎您,${user} <button onclick="exit()">退出</button>`;

    } else {
        location.href = "./login_account.html?returnUrl=" + encodeURIComponent(location.href)
    }

    // 渲染页面

    shoppingCart();
    async function shoppingCart() {
        const result = await searchShoppingCar();
        console.log(result);
        var tbody = document.querySelector("tbody");
        var {
            status,
            msg,
            list,
            id,
            gid,
            goodsName,
            goodsImg
        } = result;
        var shoppingList = list;
        // console.log(shoppingList);
        shoppingList.forEach((item) => {
            item.checked = false;
        });
        console.log(shoppingList, "shoppingList");
        if (status) {
            if (list.length) {
                var html = "";
                list.forEach(({
                    user,
                    gid,
                    buyNum,
                    goodsImg,
                    goodsName,
                    goodsPrice
                }) => {
                    html += `<tr>
              <td class="checkbox"><input class="check-one check" data-gid="${gid}" type="checkbox" /></td>
              <td class="goods"><img src="${goodsImg}" alt="" /><span>${goodsName}</span></td>
              <td class="price">${goodsPrice}</td>
              <td class="count">
                  <span class="reduce">-</span>
                  <input class="count-input" type="text" value="${buyNum}" />
                  <span class="add">+</span>
              </td>
              <td class="subtotal">${goodsPrice * buyNum}</td>
              <td class="operation"><span class="delete">删除</span></td>
          </tr>`;
                });
                tbody.innerHTML = html;
                //   console.log(listPage)
            } else {
                tbody.textContent = "暂无数据";
            }
        } else {
            alert(msg);
        }
        //   // 点击结算按钮
        //   $("closing").click(function () {
        //     console.log(678);
        //   });

        // 全选
        $(".check-all").click(function () {
            // var status = this.checked;
            var status = $(this).prop("checked");
            console.log(status);
            $(".check-one").prop("checked", status);
            shoppingList.forEach((item) => {
                item.checked = status;
            });
            console.log(shoppingList, "shoppingList-all");

            getTotal();
        });

        // 反选
        // input输入框的事件： onchange   oninput
        $(".check-one").click(function (e) {
            e = e || window.event;
            var gid = e.target.getAttribute("data-gid");
            shoppingList.forEach((item) => {
                if (item.gid == gid) {
                    item.checked = e.target.checked;
                }
            });
            // console.log(shoppingList, 'shoppingList');

            isAllChecked();
            getTotal();
        });

        $(".add").click(function () {
            console.log(1111);
            var num = $(this).prev().val();
            num++;
            console.log(num, "num");

            $(this).prev().val(num);

            var price = $(this).parent().prev().text();
            var subtotal = (price * num).toFixed(2);
            $(this).parent().next().text(subtotal);
            $(this).prevAll(".reduce").text("-");

            getTotal();
        });

        $(".reduce").click(function () {
            var num = $(this).next().val();
            if (num <= 1) return false;
            num--;
            if (num == 1) $(this).text("");
            $(this).next().val(num);

            var price = $(this).parent().prev().text();
            var subtotal = (price * num).toFixed(2);
            $(this).parent().next().text(subtotal);
            getTotal();
        });

        $(".delete").click(function () {
            if (confirm("是否删除当前商品?")) {
                $(this).parents("tr").remove();
                isAllChecked();
                getTotal();
            }
        });

        $("#deleteAll").click(function () {
            if (confirm("是否删除选中商品?")) {
                $(".check-one:checked").parents("tr").remove();
                isAllChecked();
                getTotal();
            }
        });
        $("#clearAll").click(function () {
            if (confirm("是否清空购物车?")) {
                $(".check-one").parents("tr").remove();
                isAllChecked();
                getTotal();
            }
        });

        function isAllChecked() {
            var flag = $(".check-one").is(":not(:checked)"); // 是否存在未被选中的 (true:存在 false:不存在)

            $(".check-all").prop(
                "checked",
                $(".check-one").length == 0 ? false : !flag
            );
        }

        function getTotal() {
            var sum = 0;
            var allPrice = 0;
            $(".check-one:checked")
                .parents("tr")
                .each(function () {
                    var num = $(this).find(".count-input").val() * 1;
                    var subtotal = $(this).find(".subtotal").text() * 1;
                    console.log(num, subtotal);
                    sum += num;
                    allPrice += subtotal;
                });

            $("#selectedTotal").text(sum);
            $("#priceTotal").text(allPrice.toFixed(2));
        }
        $(document).on("click", ".closing", async () => {
            // 总价格
            var total = priceTotal.innerHTML;
            console.log(total, "total");
            // 订单数据
            var orderData = shoppingList.filter((item) => {
                if (item.checked == true) {
                    return item;
                }
            });
            console.log(orderData, "orderData");
            if (orderData.length == 0) {
                alert("请选择需要付款的商品");
                return;
            }
            // 请求接口
            var user = getCookie("lgc");
            var orderId = user + new Date().getTime();
            //   把获取到的存到数据库
            var result = await addToSubmit({
                user,
                orderId,
                orderList: JSON.stringify(orderData)
            });
            var {
                status,
                msg
            } = result;
            console.log(result);
            if (status) {
                location.href = `../html/submitOrders.html?orderId=${orderId}`;
            } else {
                alert(msg);
            }
        });
    }




</script>


</html>